<template>
<a-dropdown>
    <!-- <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a> -->
    <a-avatar>
      <template #icon>
        <UserOutlined />
      </template>
    </a-avatar>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a>{{user}}</a>
        </a-menu-item>
        <a-menu-item>
          <a @click="logout">退出登录</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts">
import {ref, defineComponent, computed} from "vue";
import { UserOutlined,DownOutlined  } from "@ant-design/icons-vue";
import {useStore} from "vuex";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
export default defineComponent({
  name: "User",
  components: {
    UserOutlined,
  },
  setup: () => {
    const store = useStore();
    const user = computed(() => store.state.currentUser.user);
    const router = useRouter()
    const logout = async () => {
      const res = await store.dispatch('logoutAction');
      if (res) {
        message.success("退出成功");
        router.push({name: 'login'});
      }
    }
    return { user,logout };
  },
});
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
